<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../../js/vue.js"></script>
</head>
<body>
    <div id="app">
      <App></App>
    </div>
</body>
<script>

    Vue.config.productionTip = false; // 解决警告信息的

    /*
    
      step1:创建组件实例：

      提醒：是extend而不是extends

      name配置项：我们希望给每个组件都添加一个，它的作用有三个，当前的作用是让浏览器中vue开发工具中，便于区分组件

      问题：组件实例app到底是什么东西
      是一个VueComponent（）的构造函数,即Vue.extend()返回一个VueComponent（）的构造函数

      一休时刻：为啥要让Vue.extend()返回一个VueComponent（）的构造函数，这样做的目的是什么？
            答：由于组件是要复用的，我们希望每一次组件实例化时，得到的是一个全新的带有初始化数据的组件实例，而且它与上一次实例化没有任何关系，即保持复用组件之间的独立性和初始化
      
      
    step2: 注册组件
    创建组件实例后，要在父组件或者vm实例中进行注册，才可以使用，使用components配置项进行注册

    step3: 放置组件
    在vm模板中或容器上，通过标签的方式使用组件，单双标签均可，但在非单文件组件中，尽量写成双标签


      

    
    
    
    
    */   

    const App = Vue.extend({

      name: "App",
      template:`
      <h1>App {{message}}</h1>
      `,
      data(){

        return {
          message: "hello",
        };
      },
    });

    console.log(app);




    const vm = new Vue({
      el: "#app",
      data() {
        return {
         
        };
      },

      components:{
        App,

      }

    });
  </script>


</html>